<template>
	<view class="template-content bg-gray">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF00">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view class="custom-nav__back">
					<text class="">月度下载</text>
				</view>
			</view>
		</tn-nav-bar>
		
		<qiun-data-charts canvas2d type="area" :opts="revenueOpts" :chartData="revenueChartData"
			background="#FFFFFF" />

		<!-- 模拟器上，图表是显示在最上层挡住很多东西，真机是没有问题的，因为加了canvas2d处理 -->
		<!-- 如因一次性加载太多太多，所以会慢，也因懒得写延时加载，所以实际应用中自行延时处理 -->

		<view class="" :style="{paddingTop: 20 + 10 + 'px'}">

			<view class="tn-padding-top-xl tn-padding-bottom-xl">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="justify-content-item tn-margin tn-text-bold tn-text-lg">
						下载数据
					</view>
					<view
						class="tn-flex tn-flex-col-center justify-content-item tn-margin-right tn-padding-xs tn-text-sm tn-bg-white tn-radius tn-color-gray--dark"
						style="border-radius: 12rpx;">
						<picker @change="bindDateChange" mode="date" :value="date" :start="startDate" :end="endDate"
							fields="month">
							<text class="tn-padding-left-xs tn-padding-right-xs">{{date}}</text>
						</picker>
						<view class="tn-icon-sequence">
						</view>
						<picker @change="bindDateChange1" mode="date" :value="date1" :start="startDate1" :end="endDate1"
							fields="month">
							<text class="tn-padding-left-xs tn-padding-right-xs">{{date1}}</text>
						</picker>
					</view>
				</view>
				<view class=""
					style="min-height: 500rpx;margin: 30rpx 30rpx 0rpx 30rpx;padding:30rpx 0;border-radius: 20rpx;overflow: hidden;background-color: #FFFFFF;">
					<qiun-data-charts canvas2d type="area" :opts="revenueOpts" :chartData="revenueChartData"
						background="#FFFFFF" />
				</view>
			</view>

			<!-- 回到首页悬浮按钮-->
			<nav-index-button></nav-index-button>

		</view>
	</view>
</template>

<script>
	import NavIndexButton from '@/components/nav-index-button.vue'
	export default {
		name: 'TemplateContent',
		components: {
			NavIndexButton
		},
		data() {
			return {
				date: '2023-07',
				date1: '2024-03',

				// 月度下载
				revenueChartData: {},
				revenueOpts: {
					color: ["#4B98FE", "#00D05E", "#FFAC00", "#FB6A67", "#957BFE", "#00B9FE", "#FE871B", "#00C8B0",
						"#F674D6"
					],
					padding: [15, 15, 0, 15],
					dataLabel: false,
					xAxis: {
						disableGrid: true,
						axisLineColor: "#FFFFFF",
					},
					yAxis: {
						gridColor: "rgba(230,230,230,0.6)",
						disabled: false,
						disableGrid: false,
						gridType: 'dash',
						dashLength: '4',
						data: [{
							axisLineColor: "#FFFFFF",
							min: 0,
							max: 2000
						}, ],
					},
					legend: {
						show: false,
						position: "top",
						float: "right",
					},
					extra: {
						area: {
							type: "curve",
							opacity: 1,
							addLine: true,
							width: 2,
							gradient: true,
						},
					},
				},

			}
		},
		onReady() {
			this.drawRevenueCharts(); //月度下载
		},
		methods: {
			// 时间
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},

			// 时间
			startDate1() {
				return this.getDate('start');
			},
			endDate1() {
				return this.getDate('end');
			},

			bindDateChange: function(e) {
				this.date = e.detail.value
			},

			bindDateChange1: function(e) {
				this.date1 = e.detail.value
			},

			// 月度下载 绘制
			drawRevenueCharts() {
				let res = {
					categories: [
						"7月",
						"8月",
						"9月",
						"10月",
						"11月",
						"12月",
						"1月",
						"2月",
						"3月",
					],
					series: [{
						name: "下载量",
						data: [800, 1068, 908, 1200, 1108, 1480, 1300, 1677, 1560],
						legendShape: "circle",
						color: "#FF6694",
						pointShape: "none",
					}],
				};
				this.revenueChartData = JSON.parse(JSON.stringify(res));
			},

		}
	}
</script>

<style lang="scss" scoped>
	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 45rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}
	}

	/* 自定义导航栏内容 end */

	.bg-gray {
		background-color: #F4F5FE;
		min-height: 100vh;
	}
</style>